<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        #c1{
            background: #fff;
        }
        body{
            background: #000;
        }
    </style>
    <script>

    </script>
</head>
<body>
<canvas id="c1" width="800" height="600"></canvas>
</body>
</html>
<script>
    var oC=document.getElementById('c1');

    var gd=oC.getContext('2d');

    var oImg=new Image();
    oImg.src='20110222_14.png';
    document.body.appendChild(oImg);

    var n=0;

    setInterval(function () {
        gd.clearRect(0,0,oC.width,oC.height);
        gd.drawImage(oImg,40*n,0,40,55,100,100,120,165);
        gd.stroke();

        n++;
        if(n==4){
            n=0;
        }

    },200);


</script>
































